<!--  -->
<template>
  <div>
    <div style="text-align: left; margin: 5px 10px">
      <el-button type="primary" @click="toAddUser">新增系统用户</el-button>
    </div>
    <!-- 新增用户form表单 -->
    <el-dialog :title="state.formTitle" v-model="state.userFormDialogVisible">
      <el-form
        ref="userForm"
        :model="state.userFormData"
        :rule="state.rules"
        label-width="100px"
      >
        <el-form-item label="用户名" prop="username">
          <el-input
            v-model="state.userFormData.username"
            placeholder="请输入用户名"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="resetform">重置</el-button>
          <el-button type="primary" @click="handelConfirm">确定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 角色表单 -->
    <el-dialog title="设置角色" v-model="state.showSetRoleDialog">
      <el-select @change="upRole" value="选择角色" placeholder="选择角色">
        <el-option
          v-for="item in roles"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        ></el-option>
      </el-select>
    </el-dialog>

    <!-- 系统用户表格 -->
    <div style="margin: 0px 10px; text-align: left">
      <el-table
        :data="
          state.users.slice(
            (state.currentPage - 1) * state.pageSize,
            state.currentPage * state.pageSize
          )
        "
      >
        <el-table-column prop="username" label="用户名"></el-table-column>
        <el-table-column prop="roleName" label="角色"></el-table-column>
        <el-table-column label="状态">
          <template #default="scope">
            <el-switch
              v-model="scope.row.status"
              active-color="green"
              inactive-color="red"
              @change="(value:any) => commitStatusChange(value,scope.row)"
            ></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="220px">
          <template #default="scope">
            <el-button type="text" size="small" @click="toSetRole(scope.row.id)"
              >授权</el-button
            >
            <el-button type="text" size="small" @click="resetPw(scope.row.id)"
              >重置密码</el-button
            >
            <el-button type="text" size="small" @click="toEditUser(scope.row)"
              >编辑</el-button
            >
            <el-button
              type="text"
              size="small"
              @click="deleteUser(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页器 -->
      <el-row style="float: right">
        <el-pagination
          layout="total,sizes,prev,pager,next,jumper"
          :total="state.users.length"
          :current-page="state.currentPage"
          :page-sizes="[2, 4, 8, 16]"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
        >
        </el-pagination>
      </el-row>
    </div>
  </div>
</template>

<script setup lang="ts">
import {
  addSysUser,
  deleteSysUsers,
  getAllSysUsers,
  updateStatus,
  updateSysUser,
  resetPassword,
  setRole,
} from "@/api/system/user";
import { getAllRoles } from "@/api/system/role";
import "element-plus/es/components/message-box/style/css";
import "element-plus/es/components/notification/style/css";
import {
  ComponentInternalInstance,
  getCurrentInstance,
  onMounted,
  reactive,
  Ref,
  ref,
} from "vue";

const { proxy } = getCurrentInstance() as ComponentInternalInstance;

const state = reactive({
  users: [],
  currentPage: 1,
  pageSize: 10, //每页显示十条
  userFormDialogVisible: false,
  userFormData: {
    username: "",
  },
  rules: {
    username: [{ required: true, message: "请输入用户名", trigger: blur }],
  },
  formTitle: "",
  showSetRoleDialog: false,
  currentUserId: 0,
});
interface Role {
  id: number;
  name: string;
}
const roles: Ref<Array<Role> | null> = ref(null);

//初始化
onMounted(() => {
  getUsers();
});

//获取系统用户
const getUsers = () => {
  getAllSysUsers().then((result) => {
    state.users = result.data;
  });
};

//改变页
const handleCurrentChange = (val: number) => {
  state.currentPage = val;
};

//改变当前条数
const handleSizeChange = (val: number) => {
  state.pageSize = val;
};

// 添加系统用户按钮
const toAddUser = () => {
  state.formTitle = "添加用户";
  state.userFormDialogVisible = true;
};

//确认添加或修改用户
const handelConfirm = () => {
  if (state.formTitle.startsWith("添加用户")) {
    addSysUser(state.userFormData).then((res) => {
      if (res.data == 1) {
        proxy?.$Alert("添加成功");
      }
      getUsers();
      state.userFormDialogVisible = false;
    });
  } else if (state.formTitle.startsWith("修改用户")) {
    updateSysUser(state.userFormData).then((result) => {
      proxy?.$Alert("更新成功");
      getUsers();
      state.userFormDialogVisible = false;
    });
  }
};

// 重置用户信息
const resetform = () => {
  state.userFormData = {
    username: "",
  };
};

//删除用户
const deleteUser = (id: number) => {
  proxy?.$Confirm("确认要删除当前用户嘛？").then(() => {
    deleteSysUsers(id).then(() => {
      proxy?.$Notify.success({
        title: "删除成功",
        duration: 500,
      });
      getUsers();
    });
  });
};

//编辑用户
const toEditUser = (selectUser: object) => {
  state.userFormData = JSON.parse(JSON.stringify(selectUser));

  state.formTitle = "修改用户";
  state.userFormDialogVisible = true;
};

interface User {
  id: number;
  status: boolean;
}
//更新用户状态
const commitStatusChange = (value: boolean, user: User) => {
  proxy?.$Confirm(value === false ? "冻结用户" : "激活用户").then(() => {
    updateStatus(user.id, user.status).then(() => {
      proxy?.$Notify.success(value === false ? "已冻结" : "已激活");
    });
  });
};

//重设密码
const resetPw = (userId: number) => {
  proxy?.$Confirm("重置该用户的密码，请谨慎操作").then(() => {
    resetPassword(userId).then(() => {
      proxy?.$Notify.success("密码重置成功");
    });
  });
};

//设置角色按钮
const toSetRole = (userId: number) => {
  getAllRoles().then((result) => {
    roles.value = result.data;
    state.currentUserId = userId;
    state.showSetRoleDialog = true;
  });
};

//确认设置角色
const upRole = (roleId: number) => {
  setRole(state.currentUserId, roleId).then((result) => {
    if (result.data === 1) {
      proxy?.$Notify.success("角色设置成功");
      getUsers();
      state.showSetRoleDialog = false;
    }
  });
};
</script>
<style lang="scss" scoped></style>